<template>
  <div class="SignUpFrom">
    <!-- 标题栏 -->
    <mt-header fixed title="填写报名表">
      <mt-button icon="back" slot="left" v-on:click="goBack"></mt-button>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>

    <!-- 用来给标题栏占位 -->
    <div style="height: 2.75rem;width: 100%;"></div>

    <!-- 表单主体 -->
    <div class="fromLayout">
      <div style="width: 100%; height: 1px;"></div>
      <div class="from_Item_Layout">
        <p>
          姓名
        </p>
        <mt-field
          placeholder="请输入姓名"
          ref="username"
          v-model="username"
        ></mt-field>
      </div>
      <div class="from_Item_Layout">
        <p>
          电话号码
        </p>
        <mt-field
          type="number"
          placeholder="请输入电话号码"
          ref="phone"
          v-model="phone"
        ></mt-field>
      </div>
      <div class="from_Item_Layout">
        <p>
          所在寝室
        </p>
        <span class="site-name">苑/楼</span>
        <mt-field
          placeholder="楼/苑"
          v-model="house1"
          ref="num1"
          class="site-box"
        ></mt-field>
        <span class="site-name">栋数</span>
        <mt-field
          placeholder="栋"
          v-model="house2"
          ref="num2"
          class="site-box"
        ></mt-field>
        <span class="site-name">寝室号</span>
        <mt-field
          placeholder="单元 寝室"
          v-model="house3"
          ref="num3"
          class="site-box"
        ></mt-field>
      </div>
      <div class="from_Item_Layout" style="clear: both;" @click="focusPrice">
        <p>
          家乡
        </p>
        <mt-field
          placeholder="请选择家乡"
          ref="site"
          v-model="hometown"
          @blur.native.capture="blurPrice"
        ></mt-field>
      </div>
      <div class="from_Item_Layout">
        <p>
          父母职业
        </p>
        <mt-field
          placeholder="请输入父母职业"
          v-model="professionsParents"
          ref="profession"
        ></mt-field>
      </div>
      <div class="from_Item_Layout">
        <p>
          专业
        </p>
        <mt-field
          placeholder="请输入所学专业"
          v-model="specialities"
          ref="major"
        ></mt-field>
      </div>
      <div class="from_Item_Layout">
        <p>
          有无留学计划
        </p>
        <mt-field
          placeholder="请输入未来留学计划,没有填无"
          v-model="studyAbroad"
          ref="abroad"
        ></mt-field>
      </div>
      <div class="from_Item_Layout">
        <p>
          学习目的
        </p>
        <!-- 大输入框，所以加了个class用来单独处理高度 -->
        <mt-field
          class="objective"
          placeholder="请输入学习目的"
          v-model="objective"
          type="textarea"
          rows="8"
          ref="purpose"
        ></mt-field>
      </div>
    </div>

    <mt-button class="SignUpButton" type="primary" @click="insertSignUp"
      >确认报名</mt-button
    >
    <!-- 省市县 -->
    <div class="dialog" v-show="isAddredd">
      <div class="dialog-cover"></div>
      <div class="dialog-content">
        <mt-picker
          :slots="slots"
          value-key="name"
          @change="onValuesChange"
          v-show="isAddredd"
        ></mt-picker>
        <div class="dialog-buttom">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Picker } from "mint-ui";
import myaddress from "../assets/json/address.json"; //引入省市区数据
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  components: {
    "mt-picker": Picker
  },
  data() {
    return {
      username: "",
      phone: "",
      house1: "",
      house2: "",
      house3: "",
      hometown: "",
      professionsParents: "",
      specialities: "",
      studyAbroad: "",
      objective: "",

      isAddredd: false,
      slots: [
        {
          flex: 1,
          values: myaddress,
          defaultIndex: 0,
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot2"
        },
        {
          flex: 1,
          values: myaddress[0].children,
          defaultIndex: 0,
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "-",
          className: "slot4"
        },
        {
          flex: 1,
          values: myaddress[0].children[0].children,
          defaultIndex: 0,
          className: "slot5",
          textAlign: "center"
        }
      ]
    };
  },
  created() {
    this.selectSignUp();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    //正式报名到支付
    goPayAudit() {
      this.$router.push({
        name: "PayAudit"
      });
    },
    //报名资料提交
    insertSignUp() {
      let num1 = this.$refs.num1.value;
      let num2 = this.$refs.num2.value;
      let num3 = this.$refs.num3.value;
      let dormitory = num1 + "-" + num2 + "-" + num3;
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/apply/apply_train_card",
          {
            uid: localStorage.uid,
            username: this.$refs.username.value,
            phone: this.$refs.phone.value,
            dormitory: dormitory,
            site: this.$refs.site.value,
            profession: this.$refs.profession.value,
            major: this.$refs.major.value,
            abroad: this.$refs.abroad.value,
            purpose: this.$refs.purpose.value
          },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.goPayAudit();
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //报名资料获取
    selectSignUp() {
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/apply/apply_user_sel",
          { uid: localStorage.uid },
          { emulateJSON: true }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();

          if (kun.code == 200) {
            (me.username = kun.data.username),
              (me.phone = kun.data.phone),
              (me.house1 = kun.data.tower1),
              (me.house2 = kun.data.tower2),
              (me.house3 = kun.data.tower3),
              (me.hometown = kun.data.site),
              (me.professionsParents = kun.data.profession),
              (me.specialities = kun.data.major),
              (me.studyAbroad = kun.data.abroad),
              (me.objective = kun.data.purpose);
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    focusPrice() {
      this.isAddredd = true;
    },
    blurPrice() {
      let me = this;
      this.$nextTick(() => {
        me.isAddredd = false;
      });
    },
    //选择省市县
    onValuesChange(picker, values) {
      //console.log(picker);
      if (values[0]) {
        picker.setSlotValues(1, values[0].children);
        let town = [];
        if (values[1]) {
          town = values[1].children;
        }
        picker.setSlotValues(2, town);

        this.hometown =
          values[0].name + "-" + values[1].name + "-" + values[2].name;
      } else {
        this.$nextTick(() => {
          if (this.myAdress) {
            // 赋默认值
          } else {
            picker.setValues([
              myaddress[0],
              myaddress[0].children[0],
              myaddress[0].children[0].children[0]
            ]);
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  width: 21.5625rem;
  margin: 0rem;
  font-size: 0.9375rem;
  color: #333333;
}
//所在地址
.site-name {
  float: left;
  margin-top: 1.5625rem;
  margin-left: 0.625rem;
  color: #343434;
  font-size: 0.8125rem;
  display: inline-block;
  width: 12%;
  overflow: hidden;
}
.site-box {
  width: 77.5%;
  float: left;
  margin-left: 0.9375rem;
}

.SignUpFrom {
  padding-bottom: 1.4375rem;
  background: rgb(229, 39, 77);
  /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgb(229, 39, 77) 25%,
    rgb(255, 127, 95) 75%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgb(229, 39, 77) 25%,
    rgb(255, 127, 95) 75%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgb(229, 39, 77) 25%,
    rgb(255, 127, 95) 75%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f5f', endColorstr='#e5274d', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

// 标题栏
.mint-header {
  height: 2.75rem;
  line-height: 1.25;
  // background-color: transparent;
  background-color: rgb(229, 39, 77);
}

// 表单
.fromLayout {
  width: 21.5625rem;
  margin: 0 auto;
  margin-top: 3.6875rem;
  background-color: #ffffff;
  border-radius: 0.625rem;
  padding-bottom: 3.4375rem;

  // 表单Item容器
  .from_Item_Layout {
    margin-top: 0.9375rem;

    // 标题
    > p {
      color: #343434;
      margin-left: 0.625rem;
      font-size: 0.8125rem;
    }

    // 输入框
    /deep/ .mint-cell-wrapper {
      width: 20.3125rem;
      height: 2.5rem;
      margin: 0 auto;
      margin-top: 0.625rem;
      font-size: 0.8125rem;
      border: 1px solid #9a9a9a;
      border-radius: 0.3125rem;

      input::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #cccccc;
      }

      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #cccccc;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #cccccc;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #cccccc;
      }
    }

    //学习目的是一个大输入框，所以单独处理高度
    .objective {
      /deep/ .mint-cell-wrapper {
        height: 6.25rem;

        .mint-field-core {
          height: 5.625rem;
        }
      }
    }
  }
}

// 按钮
.SignUpButton {
  width: 21.5625rem;
  height: 2.5rem;
  display: block;
  margin: 0 auto;
  margin-top: 2rem;
  border-radius: 5px;
  background-color: #ff0000;
  color: #ffffff;
  font-size: 0.9375rem;
  box-shadow: 0rem 0.1875rem 0.75rem rgba(255, 0, 0, 0.3);
}

//省市区
.dialog {
  position: relative;
  color: #2e2c2d;
}
.dialog-cover {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
//内容
.dialog-content {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  background-color: white;
  width: 100%;

  //确认按钮
  .dialog-buttom {
    height: 3.125rem;
    width: 100%;
    line-height: 50px;
    color: #ffffff;
    text-align: center;

    /* 设置渐变 */
    background: rgb(255, 0, 0); /* Old browsers */
    background: -moz-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 30%,
      rgb(229, 39, 77) 80%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }
}
.picker {
  position: fixed;
  bottom: 3.125rem;
  background-color: white;
  width: 100%;
  height: 12.5rem;
  padding-top: 1.25rem;
}
</style>
